<template>
  <div>
    <div>
      <span>{{value.title}}</span>
      <span
        class="checkbox"
        :class="{active: allcheck}"
        @click="toggleChecked"></span>
    </div>
    <div class="checkchild" v-for="(year,index) in value.data" :key="index">
      <input type="checkbox" name="true" id="" v-model="year.val" @click="sigleChecked(index)">
      <span>{{year.caption}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManyCheck',
  mounted () {
    console.log('ManyCheck--before-' + this.allcheck)
    this.value.data.every((item) => { return item.val === true }) && (this.allcheck = true)
    this.value.data.some(item => { return item.val === false }) && (this.allcheck = false)
    console.log('ManyCheck--after-' + this.allcheck)
  },
  props: {
    value: {
      // title:'', data:[{id: '', caption: '', val:true}]
      type: Object,
      default: () => {}
      // default: function () { return [] }
    }
  },
  data () {
    return {
      allcheck: false,
      myData: {
        type: Number,
        default: 0
      }
    }
  },
  methods: {
    sigleChecked (index) {
      this.value.data[index].val = !this.value.data[index].val
      this.value.data.every((item) => { return item.val === true }) && (this.allcheck = true)
      this.value.data.some(item => { return item.val === false }) && (this.allcheck = false)
      // 返回的是索引,index，数字，0--n，第一个是0，第二个是1，类推
      this.$emit('sigleChecked', index)

      let retTrueids = []
      for (var item of this.value.data) {
        if (item.val) {
          retTrueids.push(item.id)
        }
      }
      // 返回的是id的数组
      this.$emit('trueValIds', retTrueids)
    },
    toggleChecked () {
      console.log('99999999999999999999999999999==' + this.allcheck)
      this.allcheck = !this.allcheck
      this.$emit('toggleChecked', this.allcheck)

      let retTrueids = []
      for (var item of this.value.data) {
        item.val = this.allcheck
        if (this.allcheck) {
          retTrueids.push(item.id)
        }
      }
      this.$emit('trueValIds', retTrueids)
    }
  }
}
</script>

<style scoped>
  .checkbox {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid #dcdfe6;
  }
  .checkbox:after {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 1.5px;
    left: 1px;
    content: '';
    display: block;
  }
  .checkbox:hover {
    border-color: #4763bf;
  }
  .checkbox.active {
    border-width: 2px;
    border-color: #4763bf;
  }
  .checkbox.active:after {
    background-color: #4763bf;
  }
  .checkchild {
    display:inline-table;
  }

</style>
